<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>名言警句</title>
    <script src="../jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
    <script src="../vue.global.js"></script>

    <style>
        .container {
            margin: 0 auto;
            width: 60%;
            /* height: 800px; */
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .addbutton {
            
            width: 100px;
            height: 30px;
            margin: 0 auto;
        }
        .in {
            width: 244px;
            height: 350px;
            margin: 0 auto;
        }
        .red {
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div id="counter">
        <div class="container">
            <div v-for="(item, index) in data">
                <div class="card" style="width: 18rem;height: 19rem;">
                    <div class="card-body">
                        <h5 class="card-title">{{item.title}}</h5>
                        <div class="contentString" v-show="item.ishtml">{{item.content}}</div>
                        <div class="contentHtml" v-show="!item.ishtml" v-html="item.content"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="addbutton" v-show="!isHidden">
            <button @click="displayAdd()">添加留言</button>
        </div>
        
        <div class="in" v-show="isHidden">
            <input type="text" style="width: 244px" v-model="inputTitle">
            <br>
            <textarea name="" id="" cols="30" rows="10" v-model="inputContent"></textarea>
            <div class="buttonGroup flex-column justify-content-between">
                <button :class="{'red':ischeck}" @click="change(false)">TEXT</button>
                <button :class="{'red':!ischeck}" @click="change(true)">HTML</button></button>
                <button class="cancel">取消</button>
                <button class="add" @click="add()">保存</button>
            </div>
            
        </div>
    </div>


</body>
<script>
    let Counter ={
        data() {
            return {
                inputTitle: "",
                inputContent: "",
                data: [{title: "test", content: "test", isHtml: false},
                    {title: "test2", content: "<h5>test2</h5>", isHtml: true},
                    {title: "test2", content: "<h5>test2</h5>", isHtml: false},
                ],
                isHidden: false,
                isHtml: false,
                ischeck: true,
                
            }
        },
        methods: {
            displayAdd() {
                if (this.isHidden) {
                    this.isHidden = false
                }else{
                    this.isHidden = true
                }
            },
            add() {
                if (this.inputTitle.length < 1 || this.inputContent.length < 1){
                    alert("请输入标题和内容")
                }else if (this.inputTitle.length > 10) {
                    alert("标题最大长度为10")
                }else {
                    let newData = {
                        title: this.inputTitle,
                        content: this.inputContent,
                        isHtml: this.isHtml,
                    }
                    this.data.push(newData)
                    this.isHidden = false
                    // let myData = localStorage.setItem("myData", this.data)
                }
            },
            change(jug) {
                if (jug) {
                    this.isHtml = false
                    this.ischeck = false
                }else {
                    this.isHtml = true
                    this.ischeck = true
                }
            }
        },
        mounted() {
            console.log("mounted")
            console.log(this.data)
            let myData = JSON.parse(localStorage.getItem("myData")||'[]')
            
            console.log(myData)
            if (myData != null) {
                this.data = myData
            }
            
            // this.data = myData
            
            localStorage.clear() 
        },
        updated() {
            console.log(this.data)
            localStorage.setItem("myData", JSON.stringify(this.data))
            console.log()
        }
    }
    
    const app = Vue.createApp(Counter)
    app.directive('focus', {
        mounted(el, delivered) {
          // 聚焦元素
          console.log(delivered)
          el.value = delivered.value
          console.log(el.value)
          el.focus()
        }
    })
    app.directive('add', {
        update(el) {
            console.log(el)
        },
    })
    app.mount("#counter")
    
    
    
    </script>
</html>